<template>
  <div>
    <!-- 活动名称 -->
    <el-form
      ref="form"
      :model="form"
      label-width="96px"
      :rules="rules"
      class="bg"
    >
      <el-form-item label="活动名称" prop="brandName">
        <el-input v-model="form.brandName"></el-input>
      </el-form-item>
      <!-- 品牌图片 -->
      <!-- action	必选参数，上传的地址(可以为空)  headers	设置上传的请求头部  http-request---覆盖默认的上传行为，可以自定义上传的实现 -->
      <el-form-item label="品牌图片">
        <el-upload
          class="avatar-uploader"
          action=""
          list-type="picture-card"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="form.header"
          name="pic_url"
          :drag="true"
          :http-request="uploadBrandPic"
        >
          <img v-if="form.pic_url" :src="form.pic_url" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- 品牌列表图片 -->
      <el-form-item label="品牌列表图片">
        <el-upload
          class="avatar-uploader"
          action=""
          list-type="picture-card"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="form.header"
          name="list_pic_url"
          :drag="true"
          :http-request="uploadBrandPic"
        >
          <img
            v-if="form.list_pic_url"
            :src="form.list_pic_url"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- app专用图片 -->
      <el-form-item label="App专用图片">
        <el-upload
          class="avatar-uploader"
          action=""
          list-type="picture-card"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="form.header"
          name="app_list_pic_url"
          :drag="true"
          :http-request="uploadBrandPic"
        >
          <img
            v-if="form.app_list_pic_url"
            :src="form.app_list_pic_url"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- 最低价 -->
      <el-form-item label="最低价">
        <el-input v-model="form.floor_price"></el-input>
      </el-form-item>
      <!-- 新品 -->
      <el-form-item label="新品">
        <el-switch v-model="form.is_new"></el-switch>
      </el-form-item>
      <!-- 显示 -->
      <el-form-item label="显示">
        <el-switch v-model="form.is_show"></el-switch>
      </el-form-item>
      <!-- 排序 -->
      <el-form-item label="排序" prop="sort_order">
        <el-input
          v-model="form.sort_order"
          placeholder="数字(1,2,3...)"
        ></el-input>
      </el-form-item>
      <!-- 品牌描述 -->
      <el-form-item label="品牌描述" prop="simple_desc">
        <el-input
          type="textarea"
          v-model="form.simple_desc"
          label-width="300px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">保存</el-button>
        <el-button @click="$router.push('/brand')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { editBrand, UploadPicture } from "@/request/httpAPI";
import { Message } from "element-ui";
export default {
  data() {
    return {
      form: {
        brandName: "", //活动名称
        floor_price: "", //最低价
        sort_order: "", //排序
        simple_desc: "", //商品描述
        is_show: false, //是否显示
        is_new: false, //是否新品
        app_list_pic_url: "", //app专用图片
        list_pic_url: "", //品牌列表图片
        pic_url: "", //品牌图片
        header: { "X-Nideshop-Token": localStorage.getItem("token") }, //请求头
      },
      rules: {
        brandName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        sort_order: [
          { required: true, message: "排除不能为空", trigger: "blur" },
        ],
        simple_desc: [
          { required: true, message: "品牌描述不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 上传文件之前的钩子
    beforeAvatarUpload(file) {
      // console.log(file);
    },
    // 文件上传成功时的钩子
    handleAvatarSuccess(res, file) {
      if (res.errno == 0) {
        Message({
          message: "上传成功",
          type: "success",
          duration: 1000,
        });
        this.imageUrl = res.data.fileUrl;
      } else {
        Message({
          message: "上传失败",
          type: "error",
          duration: 1000,
        });
      }
    },
    // 图片上传 --- 覆盖默认的上传行为，可以自定义上传的实现
    uploadBrandPic(data) {
      // data--图片的相关属性
      // console.log("httprequest", data);
      let formdata = new FormData();
      formdata.append("good_pic", data.file);
      UploadPicture(formdata).then((res) => {
        let formUrl = data.filename;
        // console.log(formUrl);
        if (res.errno == 0) {
          this.form[formUrl] = res.data.fileUrl;
        }
      });
    },
    //   提交事件绑定
    onSubmit(form) {
      // result---验证结果返回的Boolean值   validate--校验
      this.$refs[form].validate((result) => {
        console.log(result);
        // 验证成功 处理的逻辑(发送请求)
        if (result) {
          // console.log(this.ruleForm.password, this.ruleForm.username);
          editBrand({
            name: this.form.brandName,
            list_pic_url: this.form.list_pic_url,
            app_list_pic_url: this.form.app_list_pic_url,
            pic_url: this.form.pic_url,
            is_show: this.form.is_show,
            is_new: this.form.is_new,
            floor_price: this.form.floor_price,
            sort_order: this.form.sort_order,
            simple_desc: this.form.simple_desc,
            new_sort_order: this.form.sort_order,
          })
            .then((res) => {
              // console.log(res);
              // 请求成功
              if (res.errno == 0) {
                // localStorage.setItem("token", res.data.token); // 存储token
                // this.$store.commit(SETMENU, res.data.menu); //添加menu数据到vuex
                // this.$store.commit(SETUSERINFO, res.data.userInfo);
                Message({
                  message: "添加成功",
                  type: "success",
                  duration: 3000,
                });
                // 跳转到首页
                // Error: Redirected when going from "/login" to "/" via a navigation guard. 这里的报错是由于router版本的问题,不碍事
                // 可以catch()处理
                this.$router.push("/brand").catch((res) => {});
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  background-color: #fff;
  padding: 10px 5px;
}
/deep/ .el-input__inner {
  width: 23.5%;
}
/deep/ .el-textarea__inner {
  width: 23.5%;
}
/deep/ .el-upload-dragger {
  width: 148px;
  height: 148px;
}
</style>